<template>
  <div class="profile">
    <div class="userbg">
      <div class="userinfo">
        <img src="../assets/onself/toux.jpg"></img>
        <div class="reg-center">
          <h3> {{userInfo.name || '登录/注册'}} </h3>
          <span>{{userInfo.phone || '登录后享受更多权益'}}</span>
        </div>
        <router-link :to="userInfo.id?'/userinfo':'/login'">
          <i class="iconfont icon-arr-right"></i>
        </router-link> 
      </div>
    </div>
    <div class="money">
        <a href="javascript:;">
          <i class="iconfont icon-hongbao"></i>
          <span>红包</span>
        </a>
        <a href="javascript:;">
          <i class="iconfont icon-jinbi"></i>
          <span>金币</span>
        </a>
      </div> 
    <div class="usercontent">
        <div class="userlist">
          <div class="userleft">
            <i class="iconfont icon-dizhi"></i>
            <span>我的地址</span>
          </div>
          <div class="userright">
            <a href="javascript:;">
             <i class="iconfont icon-arr-right"></i>
            </a>
          </div>
        </div>
        <div class="userlist">
          <div class="userleft">
            <i class="iconfont icon-icon-test"></i>
            <span>我的客服</span>
          </div>
          <div class="userright">
            <a href="javascript:;">
             <i class="iconfont icon-arr-right"></i>
            </a>
          </div>
        </div>
        <div class="userlist btn_logout">
            <mt-button type="danger" size="large" v-if="userInfo.id" @click="logOut">退出登录</mt-button>
        </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import { Button,MessageBox,Toast } from 'mint-ui';
export default {
    name:'Profile',
    components:{
        MtButton:Button
    },
    computed: {
      ...mapState(['userInfo'])
    },
    methods: {
      logOut(){
      MessageBox.confirm('确定执行此操作').then(
        action => {
          this.$store.dispatch('logout');
          this.$router.go(0);
          // Toast('退出成功');
        },
        action => {
          console.log('取消');
        });
      }
    },
}

</script>
<style lang="stylus" rel="stylesheet/stylus">
.profile
  background #f5f5f5
  .userbg
    padding 2rem 0
    background #41B883
    color #fff
    .userinfo
      display flex
      align-items center
      img
        margin 0 0.8rem
        width 4rem
        background hsla(0,0,100%,.25) border-box
        border-radius 50%
        box-shadow  0 0 0 1px hsla(0,0,100%,.3) inset,0 .5em 1em rgba(0, 0, 0, 0.6)
      .reg-center
        font-size 0.8rem
        flex 1
        h3
          font-size 1.2rem
          font-weight 600
          margin-bottom 0.4rem
      a
        color #fff
        .iconfont
          font-size 1.2rem
          margin-right 0.4rem
  .money
    display flex
    padding 1rem 0
    background #fff
    a 
      display flex
      flex-direction column
      justify-content center
      align-items center
      flex 1
      .iconfont
        font-size 2rem
        &.icon-hongbao
          color #FF0000
        &.icon-jinbi
          color #41B883
      span 
        color #000
  .userlist
    background #fff
    margin-top 1rem 
    height 2.5rem
    line-height  2.5rem
    padding 0 0.4rem
    display flex
    justify-content  space-between
    .userleft
      .iconfont
        color #41B883
        font-size 1.5rem
      span
        margin-left 0.4rem
        vertical-align  top
    .userright
      .iconfont 
        color #ccc
        font-size 1rem
  .btn_logout
    padding 0
    .mint-msgbox-confirm 
      color #41B883
        
    
    
   
  
</style>